<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>linear-gradient线性渐变</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        float: left;
        margin-left: 50px;
      }
      .box::after {
        content: "";
        display: block;
        clear: both;
      }
      .box1 {
        background-image: radial-gradient(red, yellow, green);
      }
      .box2 {
        /* background-image: linear-gradient(to right top, red, yellow, green); */
        background-image: radial-gradient(at right top, red, yellow, green);
      }
      .box3 {
        /* background-image: linear-gradient(20deg, red, yellow, green); */
        background-image: radial-gradient(at 100px 50px, red, yellow, green);
      }
      .box4 {
        /* background-image: linear-gradient(red 50px, yellow 100px, green 150px); */
        background-image: radial-gradient(circle, red, yellow, green);
      }
      .box5 {
        background-image: radial-gradient(100px 100px, red, yellow, green);
        /* background-image: repeating-radial-gradient(
          100px 100px,
          red,
          yellow,
          green
        ); */
      }
      .box6 {
        background-image: radial-gradient(red 50px, yellow 100px, green 150px);
        /* background-image: repeating-radial-gradient(
          red 50px,
          yellow 100px,
          green 150px
        ); */
      }
      .box7 {
        /* 径向渐变 x轴半径，Y轴半径，at 圆心的位置 */
        background-image: radial-gradient(
          100px 50px at 150px 150px,
          red 50px,
          yellow 100px,
          green 150px
        );
        /* background-image: repeating-radial-gradient(
          100px 50px at 150px 150px,
          red 50px,
          yellow 100px,
          green 150px
        ); */
      }
    </style>
  </head>
  <body>
    <div class="box box1">默认情况，中心往外扩散</div>
    <div class="box box2">通过'关键词'调整径向渐变-圆的圆心</div>
    <div class="box box3">通过'像素值'调整径向渐变-圆的圆心</div>
    <div class="box box4">通过'circle'关键字调整为正圆</div>
    <div class="box box5">通过'像素值'关键字调整为正圆</div>
    <div class="box box6">调整径向渐变的区域</div>
    <div class="box box7">综合写法</div>
  </body>
</html>
